<template>
  <div class="file-box">
    <div class="file-name">{{ name }}</div>
    <div class="file-size">{{ size }}</div>
    <div class="file-delete" @click="() => deleteSelf(file.id)">
      <DeleteIcon />
    </div>
  </div>
</template>

<script setup lang="ts" name="File">
import type { LDFile } from '@/llmDialog/types'
import DeleteIcon from '@/components/icons/DeleteIcon.vue'
import { computed } from 'vue'

const props = defineProps<{ file: LDFile, deleteSelf: (fileId: string) => void }>()

const name = computed(() => props.file.file.name)

// 计算文件大小
const size = computed(() => {
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
  let i = 0
  let num = props.file.file.size
  while (num > 1024) {
    num /= 1024
    i++
  }
  return `${num.toFixed(2)} ${sizes[i]}`
})
</script>

<style scoped>
.file-box {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 10px;
  background-color: var(--ld-color-btn);
  color: var(--ld-color-text);
  font-size: 12px;
}
.file-name {
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.file-size {
  overflow: hidden;
  white-space: nowrap;
}
.file-delete {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
}
</style>
